<template>
    <div class="app-container">
        <el-card>
            <div slot="header">
                <span>商品分类</span>
            </div>
            <el-table :data="categoryList" border style="width: 100%" row-key="categoryId"
                :tree-props="{ children: 'children' }">
                <el-table-column prop="categoryId" label="分类ID" width="80" />
                <el-table-column prop="categoryName" label="分类名称" width="150" />
                <el-table-column prop="orderNum" label="排序" width="80" />
                <el-table-column prop="status" label="状态" width="80">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === '0' ? 'danger' : 'success'">
                            {{ scope.row.status === '0' ? '禁用' : '启用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'Category',
    data() {
        return {
            categoryList: [
                {
                    categoryId: 1,
                    categoryName: '电子产品',
                    orderNum: 1,
                    status: '1',
                    children: [
                        {
                            categoryId: 2,
                            categoryName: '手机',
                            orderNum: 1,
                            status: '1',
                            children: [
                                {
                                    categoryId: 3,
                                    categoryName: '智能手机',
                                    orderNum: 1,
                                    status: '1'
                                }
                            ]
                        },
                        {
                            categoryId: 4,
                            categoryName: '电脑',
                            orderNum: 2,
                            status: '1',
                            children: [
                                {
                                    categoryId: 5,
                                    categoryName: '笔记本电脑',
                                    orderNum: 1,
                                    status: '1'
                                },
                                {
                                    categoryId: 6,
                                    categoryName: '台式电脑',
                                    orderNum: 2,
                                    status: '1'
                                }
                            ]
                        }
                    ]
                },
                {
                    categoryId: 7,
                    categoryName: '配件',
                    orderNum: 2,
                    status: '1',
                    children: [
                        {
                            categoryId: 8,
                            categoryName: '手机配件',
                            orderNum: 1,
                            status: '1'
                        },
                        {
                            categoryId: 9,
                            categoryName: '电脑配件',
                            orderNum: 2,
                            status: '1'
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        handleEdit(row) {
            this.$message.success('编辑分类：' + row.categoryName)
        },
        handleDelete(row) {
            this.$message.success('删除分类：' + row.categoryName)
        }
    }
}
</script>